<template>
  <transition name="el-fade-in-linear">
    <div v-show="drawerShow" :style="wapperStyle" class="drawerCompWapper">
      <div class="modal" :style="modalStyle">
        <transition name="collapse">
          <div v-show="drawerShow" class="container" :style="containerStyle">
            <!-- 左侧 -->
            <div class="left" :style="leftStyle">
              <!-- 头部 -->
              <div v-if="showHeader" class="drawerHeader">
                <div class="title">
                  <slot name="drawerHeader">
                    {{ title }}
                  </slot>
                </div>
                <div
                  v-if="showClose"
                  class="close"
                  @click="$emit('update:drawerShow', false)"
                >
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <!-- 主体内容 -->
              <div class="drawerContent" :style="drawerContent">
                <slot>请添加内容！</slot>
              </div>
            </div>
            <!-- 右侧 -->
            <div v-if="hasRight" class="right" :style="rightStyle">
              <slot name="right" />
            </div>

            <!-- 底部 -->
            <div v-if="showFooter" class="drawerFooter">
              <slot name="drawerFooter">
                <div class="footerBtn">
                  <c-button
                    size="small"
                    @click="$emit('update:drawerShow', false)"
                  >
                    {{ cancelBtnName }}
                  </c-button>
                  <c-button
                    v-bind="$attrs"
                    size="small"
                    :loading="submitLoading"
                    type="primary"
                    @click="$emit('submit')"
                  >
                    {{ submitBtnName || '提交' }}
                  </c-button>
                </div>
              </slot>
            </div>
            <!-- 侧边按钮 -->
            <div
              v-if="showSlideBtn"
              class="expandIcon"
              @click="$emit('update:drawerShow', false)"
            >
              <span>收起</span>
              <i class="el-icon-caret-right"></i>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
const options = {
  mini: '334px',
  small: '608px',
  medium: '1070px'
}
export default {
  name: 'DrawerComp',
  components: {},
  props: {
    // 是否显示遮罩层 :drawerShow.sync="" 需加 .sync 修饰符
    drawerShow: {
      type: Boolean,
      default: () => false
    },
    // 显示侧边收起按钮
    showSlideBtn: {
      type: Boolean,
      default: () => true
    },
    // 是否显示抽屉
    modalShow: {
      type: Boolean,
      default: () => true
    },
    /** 抽屉大小
     *
     * mini 334px
     * small 608px
     * medium 1070px
     *
     */
    size: {
      type: String,
      default: () => 'mini'
    },
    // 抽屉标题
    title: {
      type: String,
      default: () => '标题'
    },
    // 是否需要头部
    showHeader: {
      type: Boolean,
      default: () => true
    },
    // 是否需要底部
    showFooter: {
      type: Boolean,
      default: () => false
    },
    // 是否需要关闭按钮
    showClose: {
      type: Boolean,
      default: () => true
    },
    submitBtnName: {
      type: String,
      default: '提交'
    },
    cancelBtnName: {
      type: String,
      default: '取消'
    },
    // 抽屉层级
    zIndex: {
      type: Number,
      default: () => 1024
    },
    // 提交按钮Loading
    submitLoading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      hasRight: false
    }
  },
  computed: {
    wapperStyle () {
      return {
        width: this.modalShow ? '100vw' : options[this.size],
        height: this.modalShow ? '100vh' : 'calc(100vh - 64px)',
        top: this.modalShow ? '0' : '64px',
        zIndex: this.zIndex
      }
    },
    modalStyle () {
      return {
        width: this.modalShow ? '100vw' : options[this.size],
        height: this.modalShow ? '100vh' : 'calc(100vh - 64px)',
        backgroundColor: this.modalShow ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
      }
    },
    containerStyle () {
      return {
        width: options[this.size],
        top: this.modalShow ? '64px' : '0'
      }
    },
    leftStyle () {
      return {
        width: this.hasRight ? '608px' : '100%'
        // boxShadow: this.hasRight ? '3px 0px 12px 0px rgba(0,0,0,0.12)' : ''
      }
    },
    rightStyle () {
      return {}
    },
    drawerContent () {
      return {
        height: `calc(100% - ${this.showHeader ? '66px' : '0px'} - ${
          this.showFooter ? '64px' : '0px'
        })`
      }
    }
  },

  created () {
    this.hasRight = this.$slots.hasOwnProperty('right')
  },

  methods: {}
}
</script>

<style scoped lang="scss">
.drawerCompWapper {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;

  .container {
    height: calc(100vh - 64px);
    display: flex;
    background-color: #fff;
    position: absolute;
    top: 64px;
    right: 0;
    box-shadow: -2px 0px 12px 0px rgba(0, 0, 0, 0.09);
    box-sizing: border-box;

    .right {
      width: calc(100% - 608px);
      height: calc(100% - 64px);
      box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.09) inset;
    }

    .drawerHeader {
      padding: 20px 24px 12px 24px;
      display: flex;
      justify-content: space-between;
      .title,
      .close {
        font-size: 18px;
        color: #333;
        font-weight: 550 !important;
        line-height: 32px;
      }
      .close {
        cursor: pointer;
        color: #999999;
        .el-icon-close:before {
          font-weight: 600;
          font-size: 22px;
          line-height: 32px;
        }
      }
    }
    .drawerContent {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0 24px 20px 24px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 4px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
      }
      &::-webkit-scrollbar-track {
        display: none;
      }
    }
    .drawerFooter {
      padding-right: 24px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.06);
      .footerBtn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        .el-button {
          margin-left: 8px;
        }
      }
    }
    .expandIcon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 48px;
      left: -30px;
      background: #ffffff;
      border: 1px solid #f4f4f4;
      border-radius: 8px 0px 0px 8px;
      box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: transparent;
      cursor: pointer;
      padding-left: 12px;
      span {
        position: absolute;
        top: 50%;
        left: 4px;
        transform: translateY(-50%);
        width: 12px;
        font-size: 12px;
        line-height: 16px;
        color: #666666;
      }
      i {
        font-size: 20px;
        color: #666666;
        vertical-align: sub;
      }
    }
  }
}
</style>

<style lang="scss">
// 渐入渐出
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

// 折叠
.collapse-enter-active {
  transition: all 0.5s;
}
.collapse-leave-active {
  transition: all 1s;
}
.collapse-enter {
  transform: translateX(100%);
}
.collapse-leave-to {
  transform: translateX(200%);
}
</style>
